<template>
	<view>
		<image style="width: 100%;height: 290px;z-index: 1;position: relative;" mode="widthFix"
			:src='imgURL3+"me/login/bg.png"'></image>
		<view @click="returnTo" style="position: absolute;top:20px;z-index: 9;"><uni-icons type="left" size="30"
				color="#ffffff"></uni-icons>
		</view>
		<view
			style="height: 200px;width: 100%;background: linear-gradient(to bottom,#7E0D11,#994043,#fff); margin-top: -10px;">
		</view>
		<view style="width: 100%;height: 380px;padding: 20px;z-index: 9;position: absolute;margin-top: -420px;">
			<view style="background-color:#fff; height:100%;width: 100%;border-radius: 10px;padding: 25px;">
				<view style=" justify-content: center; text-align: center;">
					<view style="justify-content: center;">
						<!-- <view class="text"></view> -->
						<view class="text-xl text-bold text-red" style="z-index: 10;">欢迎使用 六社联动</view>
						<image class="margin-top-sm" src="../../static/image/logo.png"
							style=" width: 200rpx; height: 200rpx; border-radius: 50%;"></image>
						<!-- <view class="text-xl text-bold text-red"
							style="z-index: 10;">登录</view> -->
					</view>
					<!-- <view @click="falg=false">
						<view :class="falg?'text':'text2'"></view>
						<view :class="falg?'text-xl text-bold text-red':'text-xl text-bold text-white'"
							style="margin:-35px 0 0 30px;z-index: 10;position: absolute;">微信登录</view>
					</view>
					<view @click="falg=true">
						<view :class="falg?'text-right':'text-right2'"></view>
						<view :class="falg?'text-xl text-bold text-white':'text-xl text-bold text-red'"
							style="margin:-35px 0 0 33px;z-index: 10;position: absolute;">密码登入</view>
					</view> -->
				</view>
				<!-- <view style="display: flex;justify-content: center;width: 100%;font-size: 20px;">密码登录</view> -->
				<!-- 验证码登录 -->
				<view v-if="falg">
					<view class="input-item flex-row" style="padding: 25px 0 20px 0; border-bottom: 1px solid #D8D8D8;">
						<image :src="imgURL3+'me/login/account.png'" style="width: 30px;height: 30px;"></image>
						<input style="margin:5px 0 0 15px;" v-model="from.account" class="input" type="text"
							placeholder="请输入您的账号" maxlength="30" />
					</view>
					<view class="input-item flex-row" style="padding: 25px 0 20px 0; border-bottom: 1px solid #D8D8D8;">
						<image :src="imgURL3+'me/login/password.png'" style="width: 30px;height: 30px;margin-left: ;">
						</image>
						<input v-model="from.password" class="uni-input" style="margin:5px 0 0 15px;"
							placeholder="请输入密码" :password="showPassword" />
					</view>
					<view style="display: flex;justify-content: space-between;">
						<view style="color: #8E8E8E;font-size: 10px; margin-top: 10px;">忘记密码？</view>
					</view>
					<view class="flex-row margin-tb-sm text-sm" style="flex-wrap:wrap;">
						<uni-icons type="circle-filled" size="20" class="icon" style="line-height: 17px;"
							color="#EE3F4D" v-if="xieyi" @click="xieyi = !xieyi"></uni-icons>
						<uni-icons type="circle" size="20" class="icon" style="line-height: 17px;" color="#aaa"
							v-if="!xieyi" @click="xieyi = !xieyi"></uni-icons>
						<text class="text-grey1">已阅读并同意</text>
						<!-- <text class="themeColor text-red">《用户协议》</text> -->
						<text class="themeColor text-red" @click="to_privacy(3)">《隐私协议》</text>
						<text class="themeColor text-red" @click="to_privacy(1)">《共享清单》</text>
						<text class="themeColor text-red" @click="to_privacy(2)">《敏感个人信息知情同意书》</text>
					</view>
				</view>
				<!-- 微信登录 -->
				<view v-if="!falg">
					<!-- padding:90px 40px 30px 40px; -->
					<view style="width: 100%;padding:20px 40px 10px 40px;">
						<!-- 授权用户信息 -->
						<!-- <text class="wx-text">
							手机号快捷登录
						</text> -->
						<button class="wx-text" open-type="getPhoneNumber"
							@getphonenumber="openGetPhone">手机号快捷登录</button>
					</view>
					<view class="flex-row margin-tb-sm text-sm" style="flex-wrap:wrap;">
						<uni-icons type="circle-filled" size="20" class="icon" style="line-height: 17px;"
							color="#EE3F4D" v-if="xieyi" @click="xieyi = !xieyi"></uni-icons>
						<uni-icons type="circle" size="20" class="icon" style="line-height: 17px;" color="#aaa"
							v-if="!xieyi" @click="xieyi = !xieyi"></uni-icons>
						<text class="text-grey1">已阅读并同意</text>
						<!-- <text class="themeColor text-red">《用户协议》</text> -->
						<text class="themeColor text-red" @click="to_privacy(3)">《隐私协议》</text>
						<text class="themeColor text-red" @click="to_privacy(1)">《共享清单》</text>
						<text class="themeColor text-red" @click="to_privacy(2)">《敏感个人信息知情同意书》</text>
					</view>
				</view>
				<!-- 授权登录弹窗 -->
				<uni-popup ref="openWxLoginRef" type="bottom">
					<view class="bg-white padding-sm " style="height: 220px;border-radius: 15px 15px 0 0">
						<view class="flex-row margin-bottom-sm text-lg " style="align-items: center;">
							<image src="../../static/image/logo.png"
								style="width: 25px;height: 25px;margin-right: 5px;"></image>
							<text style="margin-right: 5px;">活水源六社联动</text>
							<text>申请</text>
						</view>
						<view class="content">
							<view class="text-lg ">申请获取以下权限</view>
							<text>获得你的公开信息(昵称、头像等)</text>
						</view>
						<view class="flex-row text-lg" style="margin-left: 10%;margin-right: 10%;">
							<button class="padding-lr-lg text-green loginBtn" style="background-color: #f2f2f2;"
								@click="cancelWxLogin">拒绝</button>
							<button class="padding-lr-lg text-white loginBtn" style="background-color: #07c160;"
								open-type="getPhoneNumber" @getphonenumber="openGetPhone">允许</button>
						</view>
					</view>
				</uni-popup>
			</view>
		</view>
		<!-- 服务协议弹窗 -->
		<!-- <uni-popup ref="popup" background-color="rgba(0,0,0,0)" type="center" class="">
			<view class="bg-white padding-sm" style="height:450px;border-radius: 15px; margin: 0 8%;">
				<uni-icons type="closeempty" size="20" style="float: right;" color="#aaa"
					@click="close_xieyi"></uni-icons>
				<agreement></agreement>
				<view style="width: 100%;display: flex; justify-content: center; margin-top: 12rpx;" class="text-df">
					<view class="return-text" @click="close_xieyi">
						不同意
					</view>
					<view class="empower-text" @click="agree_xieyi">
						同意
					</view>
				</view>
			</view>
		</uni-popup> -->
		<uni-popup ref="popup" background-color="rgba(0,0,0,0)" type="bottom" class="">
			<view class="bg-white padding-sm text-df" style="height: 250px;border-radius: 15px 15px 0 0">
				<uni-icons type="closeempty" size="20" style="float: right;" color="#aaa"
					@click="close_xieyi"></uni-icons>
				<view style="text-align: center; margin-top: 25px;" class="text-bold text-df">服务协议及隐私保护</view>
				<view class="margin-top-sm ">
					<text class="text-secondary-xl" style="">为了更好保障您的合法权益，请您阅读并同意</text>
					<text class="themeColor text-red" @click="to_privacy(3)">《隐私协议》</text>
					<text class="themeColor text-red" @click="to_privacy(1)">《共享清单》</text>
					<text class="themeColor text-red" @click="to_privacy(2)">《敏感个人信息知情同意书》</text>
					<text class="text-secondary-xl">。</text>
				</view>
				<button class="agree-btn theme-bg-color text-white margin-top-xl" style=""
					@click="agree_xieyi">同意并继续</button>
			</view>
		</uni-popup>
		<view v-if="falg" style="width: 100%;padding: 20px 40px;">
			<view class="login-font" @click="getLogin">
				登录
			</view>
			<view class="login-font margin-top-lg" @click="Toregister">
				手机号注册
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { onLoad } from "@dcloudio/uni-app"
	import { reactive, ref } from 'vue';
	import { imgURL3 } from '../../api/request'
	import { login, wxlogin } from '../../api/myhome/login';
	import store from '../../store/login';
	onLoad((e) => {
		from.account = e.phone
	})
	const from = reactive({
		account: '17379932951',
		password: ''
	})
	const falg = ref(false)
	const showPassword = ref(true)
	const xieyi = ref(false)
	const popup = ref(null)
	// 微信授权登录信息
	const loginOkMsg = reactive({
		loginCode: "",
		phoneCode: "",
		rawData: "",
		signature: "",
		encryptedData: "",
		iv: ""
	})
	const agree_xieyi = () => {
		xieyi.value = true
		popup.value.close()
	}
	const close_xieyi = () => {
		popup.value.close()
		uni.switchTab({
			url: '/pages/index/index'
		})
	}
	const openWxLoginRef = ref(null)
	const openGetPhoneRef = ref(null)
	const getLogin = () => {
		if (xieyi.value) {
			login({ account: from.account, password: from.password }).then(res => {
				if (res.code === 200) {
					uni.setStorageSync('token', res.data)
					store.state.token = res.data
					uni.switchTab({
						url: "/pages/me/me"
					})
				}
			})
		} else {
			popup.value.open()
		}

	}
	// 微信授权登录
	const getempower = () => {
		if (xieyi.value) {
			// // 弹出授权弹窗
			openWxLoginRef.value.open()
		} else {
			popup.value.open()
		}

	}
	// 授权弹窗拒绝授权
	const cancelWxLogin = () => {
		openWxLoginRef.value.close()
		uni.showToast({
			title: '用户拒绝授权,登录失败',
			duration: 1000,
			icon: 'none'
		})
	}
	// 授权弹窗确认授权打开绑定手机号弹窗
	const openGetPhone = (e) => {
		var detail = e.detail
		if (detail.errMsg == "getPhoneNumber:ok") {
			loginOkMsg.phoneCode = detail.code
			wx.login({
				"provider": "weixin",
				"onlyAuthorize": true, // 微信登录仅请求授权认证
				success: function (event) {
					const { code } = event
					loginOkMsg.loginCode = code
					// 获取用户信息
					wx.getUserInfo({
						success: function (res) {
							loginOkMsg.rawData = res.rawData
							loginOkMsg.iv = res.iv
							loginOkMsg.encryptedData = res.encryptedData
							loginOkMsg.signature = res.signature
							openWxLoginRef.value.close()
							// 2.后端连接正式微信授权登录获取token
							wxlogin(JSON.stringify(loginOkMsg)).then(res => {
								if (res.code == 200) {
									uni.setStorageSync('token', res.data)
									store.state.token = res.data
									uni.showToast({
										title: '授权成功，正在前往我的...',
										duration: 1000,
										icon: 'loading'
									})
									setTimeout(function () {
										uni.switchTab({
											url: "/pages/me/me"
										})
									}, 2000);
								}
							})
						}
					})
				}
			})
		} else {
			uni.showToast({
				title: '用户拒绝授权,登录失败',
				duration: 1000,
				icon: 'none'
			})
		}
	}
	//跳转到注册页面
	const Toregister = () => {
		uni.navigateTo({
			url: '/pages/login/register'
		})
	}
	//
	const returnTo = () => {
		uni.switchTab({
			url: "/pages/me/me"
		})
	}

	//跳转隐私协议
	const to_privacy = (e) => {
		uni.navigateTo({
			url: '/pages/agreement/index?e=' + e
		})
	}
</script>

<style lang="less">
	.text {
		position: relative;
		width: 140px;
		height: 50px;
		/* 宽高 */
		background-color: #FBD7DA;
		/* 颜色 */
		border-radius: 10px;
		/* 设置圆角 */
		transform: perspective(15px)scale(1.1, 1.3) rotateX(5deg);
		/* 镜头距离元素表面的位置为8px，x轴为1.1倍y轴为1.3倍，绕x轴旋转-5度 */
		transform-origin: bottom left;
		/* top left = left top = 0 0中心点偏移量*/
		border: 1px solid #FBD7DA;
		z-index: 9;
		/* 边框 */
	}

	.text2 {
		position: relative;
		width: 140px;
		height: 50px;
		/* 宽高 */
		background-color: #EE3F4D;
		/* 颜色 */
		border-radius: 10px;
		/* 设置圆角 */
		transform: perspective(15px)scale(1.1, 1.3) rotateX(5deg);
		/* 镜头距离元素表面的位置为8px，x轴为1.1倍y轴为1.3倍，绕x轴旋转-5度 */
		transform-origin: bottom left;
		/* top left = left top = 0 0中心点偏移量*/
		border: 1px solid #EE3F4D;
		z-index: 9;
		/* 边框 */
	}

	.text-right2 {
		position: relative;
		width: 140px;
		height: 50px;
		/* 宽高 */
		background-color: #FBD7DA;
		/* 颜色 */
		border-radius: 10px;
		/* 设置圆角 */
		transform: perspective(15px)scale(1.1, 1.3) rotateX(-5deg);
		/* 镜头距离元素表面的位置为8px，x轴为1.1倍y轴为1.3倍，绕x轴旋转-5度 */
		transform-origin: top right;
		/* top left = left top = 0 0中心点偏移量*/
		border: 1px solid #FBD7DA;
		z-index: 9;
		/* 边框 */
	}

	.text-right {
		position: relative;
		width: 140px;
		height: 50px;
		/* 宽高 */
		background-color: #EE3F4D;
		/* 颜色 */
		border-radius: 10px;
		/* 设置圆角 */
		transform: perspective(15px)scale(1.1, 1.3) rotateX(-5deg);
		/* 镜头距离元素表面的位置为8px，x轴为1.1倍y轴为1.3倍，绕x轴旋转-5度 */
		transform-origin: top right;
		/* top left = left top = 0 0中心点偏移量*/
		border: 1px solid #EE3F4D;
		z-index: 9;
		/* 边框 */
	}

	.login-font {
		height: 60px;
		width: 100%;
		border-radius: 30px;
		background-color: #EE3F4D;
		text-align: center;
		color: #fff;
		font-size: 20px;
		align-items: center;
		display: flex;
		justify-content: center;
	}

	.wx-text {
		height: 60px;
		width: 100%;
		border-radius: 15px;
		background-color: #EE3F4D;
		text-align: center;
		color: #fff;
		font-size: 18px;
		align-items: center;
		display: flex;
		justify-content: center;
	}

	.empower-text {
		height: 36px;
		width: 40%;
		margin-left: 8%;
		border-radius: 5px;
		background-color: #EE3F4D;
		text-align: center;
		color: #fff;
		align-items: center;
		display: flex;
		justify-content: center;
	}

	.return-text {
		height: 36px;
		width: 40%;
		border-radius: 5px;
		background-color: #fff;
		text-align: center;
		color: #EE3F4D;
		border: 1px solid #EE3F4D;
		align-items: center;
		display: flex;
		justify-content: center;
	}

	.loginBtn {
		height: 40px;
		line-height: 40px;
	}

	.content {
		// margin-left: 50rpx;
		margin-bottom: 50rpx;
	}

	.content text {
		display: block;
		color: #9d9d9d;
		margin-top: 20rpx;
	}
</style>